<template>
	<view class="content-box">
		<view class="option-box">
			<view class="left">
				
			</view>
			<view class="process">案例组件</view>
		</view>
		<view class="detail">
			
		</view>
		<u-button @click="handelNext" class="next-btn" type="warning" :plain="true"><view class="next-text">继续</view></u-button>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	/** 案例组件 */
	defineOptions({ name: 'comp-example', inheritAttrs: false });
	
	const emit = defineEmits(['next']);
	
	// 下一步按钮
	const handelNext = () => {
		emit('next', '来自案例组件');
	}
</script>

<style lang="scss" scoped>
.content-box{
	--font-color: #332c2b;
	display: flex;
	flex-flow: column;
	flex: 1;
	padding-bottom: 50rpx;
	margin: 0 30rpx;
}
.detail{
	flex: 1;
}
.option-box{
	display: flex;
	height: 100rpx;
	align-items: center;
	
	.left{
		flex: 1;
		display: flex;
		align-items: center;
		
		.read-text{
			color: #757475;
			margin-right: 20rpx;
			font-size: 36rpx;
		}
	}
	.process{
		padding: 10rpx 14rpx;
		color: #f55f22;
		background-color: #fed7c6;
		border-radius: 30rpx;
		text-align: center;
		min-width: 150rpx;
	}
}

.next-btn{
	width: 100% !important;
}
.next-text{
	font-size: 38rpx;
	font-weight: bold;
	display: flex;
}

/* 针对 1280px 分辨率 */
@media(min-width:1200px){
	.content-box{
		width: 2400rpx;
		margin: 0 auto !important;
		
	}
	
	.process{
		min-width: 238rpx;
	}
}
</style>